<!DOCTYPE html>
<html>
    <head>
     <meta charset="utf-8">
        <title>
            文章列表
        </title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="./../../static/back/css/x-admin.css" media="all">

    </head>
    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>文章列表</cite></a>

            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
        </div>
        <script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="setUserEdit" >编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="setUserDel">删除</a>
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="setReset">推荐</a>
		</script>

           <!--顶部工具栏-->
		<div style='display: none;' id='mytoolbar'>
			<button class="layui-btn layui-icon layui-icon-add-circle " lay-event='save'>添加</button>
            <button class="layui-btn layui-icon" lay-event='batchDel'>批量删除</button>
            <button class="layui-btn layui-icon" lay-event='batchpub'>批量发布</button>
        </div>

        <!--行内模版-->
		<script type="text/html" id="checkboxTpl">
			<!-- 这里的 checked 的状态只是演示 -->
			<input type="checkbox" name="lock" value="{{data.ispub}}" title="发布" lay-filter="lockDemo"
                    {% if data.ispub is '是' %} checked {% endif %} >
		</script>
        <div class="x-body">
            <div class="layui-form-item" style="margin-top: 20px;" onsubmit="return false;">
			<form class="layui-form">
                {% csrf_token %}
				<label class="layui-form-label">标题:</label>
				<div class="layui-input-inline" style="width:120px;">
					<input type="text" id="txtTitle" name="txtTitle" autocomplete="off" class="layui-input">
				</div>
                <label class="layui-form-mid">类别:</label>
				<div class="layui-input-inline" style="width:160px;">
					<select id="type" name="type">
						<option value="">请选择</option>
                        {% for foo in typelist %}
                        <option value="{{ foo.type }}">{{ foo.type }}</option>
                        {% endfor %}

					</select>
				</div>
				<label class="layui-form-mid">是否发布:</label>
				<div class="layui-input-inline" style="width:120px;">
					<select id="cc" name="ispub">
						<option value="">请选择</option>
						<option value="是">是</option>
						<option value="否">否</option>
					</select>
				</div>
			</form>
			<button class="layui-btn" id="search" lay-filter="search"  data-type="reload">搜索</button>
		</div>
            <table id="demo" class="layui-hide" lay-filter="test"></table>
        </div>
        <script src="../../../static/back/lib/layui/layui.js" charset="utf-8"></script>
        <script src="../../../static/back/js/x-layui.js" charset="utf-8"></script>
        <script>
            layui.use(['element','table','form','layer','jquery'],function(){
                var table=layui.table,
                    form=layui.form,
                    layer=layui.layer,
                    $=layui.$;
              table.render({
                elem: '#demo'
                  ,toolbar:'#mytoolbar'
                ,url:'/back/getArticleList' //数据接口
                ,method:'get'
                ,where:{'csrfmiddlewaretoken':'{{ csrf_token }}'}
                ,page: true//开启分页
                ,limit:5//每页数据条数
                ,cols: [[//表头
                   {type:'checkbox', fixed:'left'}
                  ,{field:'id', title: '编号',hide:true}
                  ,{field:'title', title: '标题'}
                  ,{field:'type',  title: '分类', sort: true}
                  ,{field:'tags',  title: '标签云'}
                  ,{field:'ispub',  title: '是否发布'}
                  ,{field:'createtime', title: '创建时间'}
                  ,{field:'pubtime', title: '发布时间'}
                  ,{title:'操作',align:'center',toolbar:'#barDemo'}
                  ]],
                  id:'testReload'
              });
                     active = {
                        reload: function(){
                            //传递参数 标题 类别 是否发布
                          var title = $('#txtTitle').val();
                          var type = $('#type').val();
                          var ispub = $('#cc').val();

                          //执行重载
                          table.reload('testReload', {
                            page: {
                              curr: 1 //重新从第 1 页开始
                            }
                            ,where: {
                              'titlecontains':title,
                                  'type':type,
                                  'ispub':ispub
                            }
                          }, 'data');
                        }
                      };

                      $('#search').on('click', function(){
                        var type = $(this).data('type');
                        active[type] ? active[type].call(this) : '';
                      });

                //监听头部工具栏事件
				table.on('toolbar(test)',function(obj){
                    var checkStatus = table.checkStatus(obj.config.id)
                        ,data = checkStatus.data; //获取选中的数据
					if(obj.event=='save'){
						layer.open({
                            type:2,
                            title:'添加文章',
                            content:'/back/addArticle',
                            area:['700px','600px']
                        })
					}else if(obj.event=='batchDel'){
					     if(data.length === 0){
                              layer.msg('请至少选择一行');
                            } else {
                             //批量删除
                             layer.confirm('真的删除行么', function (index) {
                                 ids = '';
                                 for (var i = 0; i < data.length; i++) {
                                     id = data[i].id;
                                     ids += id + ',';
                                 }
                                 ids = ids.substring(0, ids.length - 1)//截取字符串，不要最后一个，
                                 //发起异步请求删除
                                 $.get('/back/batchDel', {'ids': ids}, function (res) {
                                     if (res.success) {
                                         layer.msg('删除成功')
                                         table.reload('testReload', {})//对哪个表格进行重新加载id属性值，参数
                                     } else {
                                         layer.msg(res.message)
                                     }
                                 }, 'json')

                             })
                         }
                    }else if(obj.event=='batchpub'){
					     if(data.length === 0){
                              layer.msg('请选择一行');
                            } else {
                              ids = '';
                                 for (var i = 0; i < data.length; i++) {
                                     id = data[i].id;
                                     ids += id + ',';
                                 }
                                 ids = ids.substring(0, ids.length - 1)//截取字符串，不要最后一个，
                                 //发起异步请求发布操作
                                 $.get('/back/batchpub', {'ids': ids}, function (res) {
                                     if (res.success) {
                                         layer.msg('发布成功')
                                         table.reload('testReload', {})//对哪个表格进行重新加载id属性值，参数
                                     } else {
                                         layer.msg(res.message)
                                     }
                                 }, 'json')
                            }

                    }
				});
				//监听行内工具栏事件
				table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，mytable 是 table 原始容器的属性 lay-filter="对应的值"
					  var data = obj.data; //获得当前行数据
					  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
					  if(layEvent === 'setUserDel'){ //删除
					    layer.confirm('真的删除行么', function(index){
						      //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						      //layer.close(index);
					          //向服务端发送删除指令  发起异步请求
                            var url='/back/expunge';
                            param={'id':data.id};
                            $.get(url,param,function (res) {
                                    if(res.success){
                                        //window.location.href='/back/getArticleList';
                                         table.reload('testReload', {})//对哪个表格进行重新加载id属性值，参数
                                        layer.msg('删除成功')
                                    }else{
                                        layer.msg(res.message)
                                    }
                            },'json')
					    });
					  } else if(layEvent === 'setUserEdit'){ //编辑
					       //do something
					       layer.msg('编辑')
                          layer.open({
                            type:2,
                            title:'添加文章',
                            content:'/back/editArticle?aid='+data.id,
                            area:['700px','600px']
                        })
					     }else if(layEvent === 'setReset'){ //推荐
					       //do something
					       layer.msg('推荐')
                           layer.open({
                                type:2,
                                title:'新增推荐',
                                content:'/back/addtuijian?id='+data.id,
                                area:['500px','400px']
                            })
					     }
					});



            })
        </script>


    </body>
</html>